import React, {useState, useEffect} from 'react';
import {Table} from 'antd';
import {parsePercent, numberHandle} from '~/utils/number';
import withPannel from '../withPannel';

import './index.less';

// const rangeConfig = [
//     [0, 5, '#386DAE40'],
//     [5, 10, '#386DAE40'],
//     [10, 15, '#386DAE40'],
//     [15, 20, '#386DAE40'],
//     [20, 25, '#386DAE40'],
//     [25, 30, '#386DAE50'],
//     [30, 35, '#386DAE60'],
//     [35, 40, '#386DAE70'],
//     [40, 45, '#386DAE80'],
//     [45, 50, '#386DAE90'],
//     [50, 55, '#386DAEa1'],
//     [55, 60, '#386DAEb1'],
//     [60, 65, '#386DAEc1'],
//     [65, 70, '#386DAEd1'],
//     [70, 75, '#386DAEe1'],
//     [75, 80, '#386DAEf1'],
//     [80, 85, '#32619A'],
//     [85, 90, '#2B5587'],
//     [90, 95, '#254974'],
//     [95, 100, '#1F3C60']
// ];

const rangeConfig = [
    [0, 25, '#C8D7E9'],
    [25, 30, '#BBCDE3'],
    [30, 35, '#AFC5DF'],
    [35, 40, '#A4BCDA'],
    [40, 45, '#97B3D4'],
    [45, 50, '#8BAAD0'],
    [50, 55, '#80A2CB'],
    [55, 60, '#7398C6'],
    [60, 65, '#6890C1'],
    [65, 70, '#5C87BD'],
    [70, 75, '#507FB8'],
    [75, 80, '#4375B3'],
    [80, 85, '#32619A'],
    [85, 90, '#2B5587'],
    [90, 95, '#254974'],
    [95, 100, '#1F3C60']
];

const getClassName = value => {
    if (value && value?.includes('%')) {
        value = value.replace(/%/, '');
    }

    if (isNaN(value)) {
        return;
    }

    const result = rangeConfig.find(item => value >= item[0] && value < item[1]);

    return result?.[2] || '#19304D';
};

const EchartConfig = props => {
    const {dataSource, unitId, children} = props;
    const [data, setData] = useState([]);
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        const columnList = dataSource?.[unitId]?.columnList || [];
        const value = dataSource?.[unitId]?.value || [];
        const newColumns = columnList?.map(item => ({
            className: 'table-col',
            title: item.name,
            width: 100,
            render(text, record) {
                const bg = getClassName(record[item.name]);

                return (
                    <div className="custom-col" style={{backgroundColor: bg, color: bg && '#fff'}}>
                        {record[item.name]}
                    </div>
                );
            }
        }));
        setColumns(newColumns);
        setData(value);
    }, [dataSource]);

    return (
        <>
            {children}
            <Table
                dataSource={data}
                columns={columns}
                pagination={false}
                size="small"
                // {...tableProps}
            />
        </>
    );
};

export default withPannel(EchartConfig, 'isTable');
